import { defineComponent, ref } from 'vue';
import { registerConfig as config } from '../../container/mapConfig.jsx';
import "./index.scss";

export default defineComponent({
    setup() {
        const data = ref(JSON.parse(localStorage.getItem("data")));
        window.addEventListener('storage', (e) => {
            try{
                data.value = JSON.parse(e.newValue || localStorage.getItem("data"))
            } catch {
                data.value = JSON.parse(localStorage.getItem("data"))
            }
        })
        return () => (
            <div
                class="browse_container"
            >
                {
                    data.value?.map((item, index)=>{
                        // console.log(item.props);
                        return <>
                            {config.componentMap[item.key].render({
                                props: item.props ? item.props : {}
                            })}
                        </>
                    })
                }
            </div>
        )
    }
})